import React from 'react'
import '@/App.scss'
/**
 * vue中实现列表渲染使用的是v-for来完成渲染的
 * 在React中实现列表渲染是通过ES6的数组的map方法来实现渲染
 * vue中条件渲染指令v-if v-else v-else-if
 * 在React中如何实现条件渲染
 * 1）使用if...else语法来实现条件渲染/switch：比较适合页面结构比较负载的情况
 * 2) 使用三元表达式来实现条件渲染：比较适合双分支，如果是多分支建议封装函数
 * 3）使用&&符号实现条件渲染:比较适合单分支条件的if判断
*/
export default function App() {

  function getHot(hotVal){
    if(hotVal>20&&hotVal<50){
      return <div className='bar' style={{backgroundColor:'pink'}}></div>
    }else if(hotVal>=50&&hotVal<80){
      return <div className='bar' style={{backgroundColor:'tomato'}}></div>
    }else if(hotVal>=80&&hotVal<=100){
      return <div className='bar' style={{backgroundColor:'red'}}></div>
    }
  }

  let type=1

  let fruits=[
    {
      id:'1001',
      name:'苹果',
      price:3.5
    },
    {
      id:'1002',
      name:'香蕉',
      price:2.5
    },
    {
      id:'1003',
      name:'草莓',
      price:12.5
    }
  ]
  //定义数组
  let books=[
    {
      isbn:'100001',
      bookName:'《精通Vue编程》',
      author:'张三',
      price:100,
      press:'清华大学出版社',
      hot:35,
      status:true
    },
    {
      isbn:'100002',
      bookName:'《精通JavaScript编程》',
      author:'李四',
      price:109,
      press:'清华大学出版社',
      hot:67,
      status:false
    }
  ]

  if(type==1){
      return (
        <div>
          <table className='mytable'>
              <thead>
                <tr>
                  <th>编号</th>
                  <th>书名</th>
                  <th>作者</th>
                  <th>价格</th>
                  <th>出版社</th>
                  <th>热度</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                {
                  books.length>0&&books.map(item=><tr key={item.isbn}>
                    <td>{item.isbn}</td>
                    <td>{item.bookName}</td>
                    <td>{item.author}</td>
                    <td>{item.price}</td>
                    <td>{item.press}</td>
                    <td>{getHot(item.hot)}</td>
                    <td>{item.status?'上架':'下架'}</td>
                  </tr>)
                }
              </tbody>
          </table>
        </div>
      )
  }else if(type==2){
    return (<>
      <ul>
          {
            fruits.length>0&&fruits.map(item=><li key={item.id}>{item.name}</li>)
          }
      </ul>
    </>)

  }

 



}

 